<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../js/flexslider/flexslider.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/common.css">

    <title>详情页</title>
</head>
<body>

<!--头部导航开始-->
<header >
    <div class="header">
        <div class="left_jt">
            <a href="">
                <img src="../img/箭头左.png"/>
            </a>
        </div>
        <div class="logo">
            <b>鲜花详情</b>
        </div>
        <div class="Category">
            <a class="my-account">
                <img src="../img/分类.png"/>
            </a>
        </div>
    </div>
</header>

<!--分类导航样式 默认隐藏-->
<div class="new-tbl-type" id="CMenu" >
    <a class="new-tbl-cell" href="index.html">
        <img class="icon1" src="../img/detail/首页.png"/>
        <br>
        首页
    </a>
    <a class="new-tbl-cell" href="">
        <img class="icon2" src="../img/detail/分类.png"/>
        <br>
        分类搜索
    </a>
    <a class="new-tbl-cell" href="">
        <img src="../img/detail/购物车.png"/>
        <br>
        购物车
    </a>
    <a class="new-tbl-cell" href="login.html">
        <img src="../img/detail/我的.png"/>
        <br>
        我的
    </a>
</div>

<!--商品介绍-->
<div class="content">
    <!--详情页轮播图-->
    <div class="flexslider lunbo">
        <ul class="slides" id="slides">
        </ul>
    </div>
    <!--花名-->
    <h4></h4>
    <p class="cost">￥</p>
    <div class="txt">
        <p><span class="del_c">包 装：</span>&nbsp;</p>
        <p><span class="del_c">花 语：</span>&nbsp;</p>
        <p><span class="del_c">配 送：</span>&nbsp;全国（本商品通过快递公司或邮政EMS寄送，全国可达，包邮）</p>
    </div>

    <div class="jieshao_box"><img class="jieshao" src=""></div>
    <!--占位-->
    <div class="perch"></div>
</div>


<!-- 页脚 加入购物车 立即购买-->
<footer class="footer">
    <a class="Icon" href="index.html">
        <img class="icon1" src="../img/detail/首页.png"/>
        <br>
        首页
    </a>
    <a class="Icon" href="">
        <img src="../img/detail/购物车.png"/>
        <br>
        购物车
    </a>
    <a class="btn btn1" href="">加入购物车</a>
    <a class="btn btn2" href="">立即购买</a>
</footer>

<div id="goTop">
    <img src="../img/返回顶部.png" />
</div>

<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/common.js"></script>
<script src="../js/flexslider/jquery.flexslider.js"></script>

<script>

    $(function () {

        var a1=location.search.substr(1).split('&');
        var result = {};
        for (var i = 0; i < a1.length; i++) {
            var a2 = a1[i].split('=');
            result[a2[0]]=decodeURIComponent(a2[1]);
        }
        var Num = parseInt(result.id);
        var params = {};
        params.num = Num;
        console.log(Num);
        console.log(a1);

        $.get("../php/detail.php",params,function(data){
            $('.content h4').html(data.title);
            $('.txt p').eq(0).append(data.pack);
            $('.txt p').eq(1).append(data.language);
            $('.content .cost').append(data.price);

            $('.slides').append('<li><img src="'+data.img1+'"></li>');

            if(data.img2 !=''){
                $('#slides').append('<li><img src="'+data.img2+'"></li>');
            }
            if(data.img3 !=''){
                $('#slides').append('<li><img src="'+data.img3+'"></li>');
            }
            if(data.img4 !=''){
                $('#slides').append('<li><img src="'+data.img4+'"></li>');
            }
//            左边轮播设置
            $('.flexslider').flexslider({directionNav:false})
                    .css({'margin-bottom':'0',"border":'none'});
            $('.flex-control-nav').css({bottom:'1px',"z-index":'20'});
            $('.flex-control-paging li a').css({'width':'5px',"height":'5px','border-radius':'5px'});
            if(data.Image1 != ''){
                $('.jieshao').attr('src', data.Image1);
            }else{
                $('.jieshao_box').remove();
            }
        });




    });//function

</script>

</body>
</html>